.article-detail-container {
    padding: 30rpx 0 108rpx;
}

.detail-title {
    padding: 0 30rpx;
    font-size: 36rpx;
    font-weight: bold;
}

.detail-header {
    @include flex(flex-start);
    margin-top: 20rpx;
    padding: 0 30rpx;
    .detail-logo {
        flex-shrink: 0;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .detail-header-content {
        width: 100%;
        padding-left: 20rpx;
        @include flex(space-between, column);
        font-size: 24rpx;
        align-items: flex-start;
        .detail-header-content-title {
            font-size: 28rpx;
            color: #333;
        }
        .detail-header-content-info {
            color: $c-9;
            text {
                margin-right: 20rpx;
            }
        }
    }
    .detail-header-button {
        padding: 0 30rpx;
        flex-shrink: 0;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        background-color: $base-color;
    }
}

.detail-content-container {
    margin-top: 40rpx;
    // min-height: 1000rpx;
    .detail-html {
        padding: 0 30rpx;
    }
    /* 评论列表样式 */
    .detail-comment {
        margin-top: 60rpx;
        .comment-title {
            padding: 20rpx 30rpx;
            font-size: 28rpx;
            color: #666;
            border-bottom: 1px solid #ddd;
        }
        .comment-content-container {
            padding: 0 30rpx;
            border-bottom: 1px solid #eee;
        }
        .no-data {
            width: 100%;
            text-align: center;
            padding: 30rpx 0;
            color: $c-9;
            font-size: 28rpx;
        }
    }
}

.detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    @include flex(flex-start);
    width: 100%;
    height: 88rpx;
    border-top: 1px #f5f5f5 solid;
    background-color: #FFFFFF;
    box-sizing: border-box;
    .input-container {
        @include flex();
        margin-left: 20rpx;
        padding: 0 20rpx;
        flex-grow: 1;
        height: 60rpx;
        border: 1px solid #ddd;
        border-radius: 5px;
        text {
            font-size: 28rpx;
            color: $c-9;
        }
    }
    .detail-bottom-icons {
        display: flex;
        flex-shrink: 0;
        padding: 0 20rpx;
    }
    .detail-bottom-icon-box {
        position: relative;
        @include flex(center);
        width: 88rpx;
    }
}